<template>
  <div class="w-table">
    <!-- type为2的时候 -->
    <el-table :data="tableData" border :span-method="objectSpanMethod" style="width: 100%">
      <el-table-column
        align="center"
        v-for="(item,k) in config"
        :key="k"
        :prop="item.props"
        :label="item.name"
        :width="item.width"
        :min-width="item.minWidth"
      >
        <template slot-scope="scope">
          <!-- {{ scope.row[`${item.props}`] }} -->
          <div v-html="scope.row[`${item.props}`]"></div>
        </template>
        <div v-if="item.child && item.child.length">
          <el-table-column
            align="center"
            :label="items.name"
            v-for="(items,indexs) in item.child"
            :key="indexs"
            :width="items.width"
            :min-width="items.minWidth"
          >
            <template slot-scope="scope">
              <!-- {{ scope.row[`${items.props}`] }} -->
              <div v-html="scope.row[`${items.props}`]"></div>
            </template>
          </el-table-column>
        </div>
      </el-table-column>
    </el-table>
    <div v-if="tableName" style="margin-top:10px;font-size:12px;text-align:center">表: {{tableName}}</div>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: []
    },
    config: {
      type: Array,
      default: []
    },
    tableName: {
      type: String
    },
    //  在那个页面被调用的，预处理页面不用合并
    useType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      mergeObj: {},
      spanIndex: []
    }
  },
  mounted() {
    this.getSpanArr()
  },
  methods: {
    getSpanArr() {
      if (this.useType === 1) {
        this.config.forEach((item, index) => {
          if (item.rowspan > 1) {
            let pushData = {
              rowID: index,
              rowProps: item.props
            }
            this.spanIndex.push(pushData)
          }
        })
      }
    },
    flitterData(arr, spanName) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          //name 修改
          let nowArr = arr[index - 1]
          if (item[spanName] === nowArr[spanName]) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      for (var i = 0; i < this.spanIndex.length; i++) {
        if (columnIndex === this.spanIndex[i].rowID) {
          // this.tableData  修改
          const _row = this.flitterData(
            this.tableData,
            this.spanIndex[i].rowProps
          ).one[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }
  }
}
</script>